<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>07_语法-v-once指令使用</title>
  <!-- 
  在 Vue 中， `v-once`  指令用于指示 Vue 只渲染元素和组件一次，并在后续的更新中跳过这些元素和组件。这意味着，使用  `v-once`  的内容在初次渲染后不会再被 Vue 的响应式系统追踪和更新。以下是对  `v-once`  指令使用的说明总结：

  1. 基本用法

  `v-once`  可以用于任何 HTML 元素或 Vue 组件。它的基本语法如下：
  <template>
    <div>
      <p v-once>{{ message }}</p>
      <button @click="updateMessage">更新消息</button>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        message: '初始消息',
      };
    },
    methods: {
      updateMessage() {
        this.message = '更新后的消息';
      },
    },
  };
  </script>
  在这个例子中， `<p>`  标签中的内容在初次渲染时显示为 "初始消息"，即使在点击按钮后  `message`  被更新， `<p>`  中的内容仍然保持不变。

  2. 性能优化

  使用  `v-once`  可以提高性能，尤其是在渲染大量静态内容时。由于 Vue 不会再追踪这些内容的变化，减少了响应式系统的负担。

  3. 适用场景

  - 静态内容：当你知道某个内容是静态的，不会随时间变化时，可以使用  `v-once` 。
  - 性能敏感的组件：在性能敏感的组件中，使用  `v-once`  可以避免不必要的重新渲染。

  4. 注意事项

  - 不支持动态更新：使用  `v-once`  的元素或组件不会响应数据变化，因此不适合需要动态更新的内容。
  - 嵌套使用：如果  `v-once`  用于包含其他动态内容的组件，只有被  `v-once`  包裹的部分会被渲染一次，内部的动态内容仍然会正常更新。

  5. 示例
  <template>
    <div>
      <h1 v-once>{{ title }}</h1>
      <p>{{ description }}</p>
      <button @click="changeDescription">更改描述</button>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        title: '静态标题',
        description: '初始描述',
      };
    },
    methods: {
      changeDescription() {
        this.description = '更新后的描述';
      },
    },
  };
  </script>
  在这个例子中， `<h1>`  的内容只会在初次渲染时显示 "静态标题"，而  `<p>`  的内容会根据  `description`  的变化而更新。

  总结

  -  `v-once`  指令：用于指示 Vue 只渲染元素或组件一次。
  - 性能优化：减少响应式系统的负担，适合静态内容。
  - 不支持动态更新：被  `v-once`  包裹的内容在初次渲染后不会再更新。
  - 适用场景：静态内容和性能敏感的组件。
  -->
</head>
<body>

  <div id="app">
    <!-- v-once指令: 只渲染一次  -->
    <h2 v-once>
      {{ message }}
      <span>数字: {{counter}}</span>
    </h2>

    <h1>{{message}}</h1>

    <button @click="changeMessage">改变message</button>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data: function() {
        return {
          message: "Hello Vue",
          counter: 100
        }
      },

      methods: {
        changeMessage: function() {
          this.message = "更新后的message"
          this.counter += 100
          console.log(this.message, this.counter)
        }
      }
    })

    // 2.挂载app
    app.mount("#app")
  </script>
  
</body>
</html>